<template>
  <div class="gridshop">
    <van-nav-bar
      :title="title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 网格商品布局 -->
    <div
      class="gridshop-list"
      v-for="item in griddatalist"
      :key="item.id"
      @click="godetail(item.id)"
    >
      <img :src="item.imgurl" style="width: 100%; height: 300px" />
      <p style="font-weight: bold; font-size: 17px">{{ item.title }}</p>
      <p style="font-size: 14px; color: darkgray">{{ item.desc }}</p>
      <p>
        <span style="color: red; font-weight: bold">￥{{ item.price }}</span>
      </p>
    </div>
  </div>
</template>

<script>
import router from "@/router";
import request from "@/utils/request";
export default {
  data() {
    return {
      id: 0,
      title: "",
      griddatalist: [],
    };
  },
  async created() {
    (this.id = this.$route.query.id), (this.title = this.$route.query.text);
    const reslut = await request.get(`/good/griddatalist?id=${this.id}`);
    this.griddatalist = reslut.data.griddatalist;
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    godetail(id) {
      router.push({ path: "/details", query: { id: id } });
    },
  },
};
</script>

<style lang="scss">
.gridshop {
  .gridshop-list {
    width: 100%;
    min-height: 100px;
    padding: 15px;
  }
}
</style>
